<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>top menu from data 测试</title>
<link href="../assets/menu.css" rel="stylesheet"/>
<link href="../assets/menuitem.css" rel="stylesheet"/>
<link href="../assets/submenu.css" rel="stylesheet"/>
<link href="../assets/filtermenu.css" rel="stylesheet"/>
<style>
    #menuTest {
        width: 300px;
    }

    .horizonal .ks-menuitem {
        float: left;
        width: 100px;
        overflow: hidden;
    }

    .horizonal {
        zoom: 1;
        overflow: hidden;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">
    顶部导航菜单
</h1>
<div id="context" style="width: 500px;margin:50px auto;">

</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>

    var data = [
        {
            content:"submenu",
            children:[
                {
                    content:"submenuitem1"

                },
                {
                    sep:1
                },
                {
                    content:"submenuitem2"
                },
                {
                    content:"sub-sub-menu3",
                    children:[
                        {
                            content:"sub-sub-menu31"
                        },
                        {
                            content:"sub-sub-menu31"
                        }
                    ]
                }
            ]
        },
        {
            content:"submenu2"
        }
    ];

    KISSY.use("menu,separator", function (S, Menu) {
        var context = S.all("#context");

        function generatePopupMenu(items, cfg) {
            var sb = {
                // boolean，是否鼠标脱离菜单后自动隐藏
                autoHideOnMouseLeave:true,
                children:[]
            };
            S.mix(sb, cfg);
            generateMenu(sb, items);
            return sb;
        }

        function generateSubMenu(item, top) {
            return S.mix({
                xclass:'submenu',
                content:item.content,
                menu:(function () {
                    return generatePopupMenu(item.children, top ? {
                        align:{
                            offset:[-1, 4],
                            points:['bl', 'tl']
                        }
                    } : {});
                })()
            });
        }

        function generateMenu(sb, items, top) {
            S.each(items, function (item) {
                if (item.children) {
                    sb.children.push(generateSubMenu(item, top));
                } else {
                    if (item.sep) {
                        sb.children.push({
                            xclass:'separator'
                        });
                    } else {
                        sb.children.push({
                            content:item.content
                        });
                    }
                }
            });
        }

        var menu = {

            width:440,
            render:'#context',
            children:[],
            elCls:"horizonal"
        };

        generateMenu(menu, data, 1);

        menu = new Menu(menu);

        menu.render();

        menu.on("click", function (e) {
            alert(e.target.get("content"));
        });
    });

</script>
</body>
</html>